<template>
    <div class="gold-shop-wrap safe-area-bottom" >
          <van-nav-bar
            :title="cityName"
            left-arrow
            fixed
            @click-left="onClickLeft"
          />
          <!-- 轮播区 -->
          <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
              <van-swipe-item
              v-for="(item, index) in bannerList"
              :key="index"
              @click="handleToParams(item)"
              >
                  <img class="banner-li" :src="item" alt="">
              </van-swipe-item>
          </van-swipe>
  
          <!-- 店铺列表 -->
          <div class="shop-box" >
              <div class="shop-title" >
                  商家列表
                  <div class="shop-title-tag" ></div>
              </div>
              
              <van-list
              v-model="loadingPage"
              :finished="finished"
              :finished-text="list.length ? '没有更多了' : ''"
              @load="ajaxGoodList"
              >
              
                  <div v-if="finished && !list.length" class="empty-good" >
                      <van-empty description="暂无商家" />
                  </div>
                  
                  <!-- 商品列表 -->
                  <div 
                  v-for="(item, index) in list"
                  :key="index"
                  class="shop-li" >
                      <div class="shop-top" >
                          <div class="shop-info" >
                              <img class="shop-info-log" :src="item.cover_url" alt="">
                              <div class="shop-info-name" >
                                  <div class="shop-name" >{{ item.name }}</div>
                                  <!-- <div class="shop-good-sale" >月销{{ item.sales_volume | saleWordFilter}}</div> -->
                              </div>
                          </div>
                          <div @click="handleToShop(item)" class="shop-btn" >进店</div>
                      </div>
                      <div  class="good-scroll">
                          <div 
                          v-for="gItem in item.goods_list"
                          :key="gItem.id"
                          class="good-li" 
                          @click="handleToItem(gItem)"
                          :style='"background: url("+gItem.cover_url+") no-repeat center"'
                          >
                              <div class="good-li-price" >¥{{ gItem.price }}</div>
                          </div>
                      </div>
                  </div>
              
              </van-list>
  
              
  
          </div>
         
  
    </div>
  </template>
  
  <script>
  import { CONFIG_DATA, SHOP_LIST } from '@/api/home';
  import { bannerToParams } from '@/tool/methods';
  export default {
      data() {
          return {
              bannerList: [],
  
              // 分页
              page: 1,
              pageSize: 20,
              list: [],
              loadingPage: false,
              finished: false,
              ids:JSON.parse(localStorage.getItem('cityInfo')).id,
              cityName:JSON.parse(localStorage.getItem('cityInfo')).name+'商家列表'
          }
      },
      mounted() {
        document.title=this.cityName
        this.bannerList=JSON.parse(localStorage.getItem('cityInfo')).banners
      },
      methods: {
          onClickLeft() {
            localStorage.removeItem('cityInfo')
              this.$router.back()
          },
          // 轮播跳转
          handleToParams(item) {
              bannerToParams(item)
          },
          // 轮播图
        //   getBanner() {
        //       this.$http.get(CONFIG_DATA, {
        //           params: {
        //               key: 'banner_jxhd'
        //           }
        //       })
        //       .then(res => {
        //           const {
        //               data
        //           } = res;
  
        //           this.bannerList = data || [];
        //       })
  
        //   },
          handleToShop(item) {
              localStorage.setItem('shopInfoName', item.name)
              this.$router.push({
                  name: 'shopInfo',
                  query: {
                      shopId: item.id
                  }
              })
          },
          handleToItem(item) {
              this.$router.push({
                  name: 'good',
                  query: {
                      id: item.id
                  }
              }) 
          },
          // 列表请求
          ajaxGoodList() {
              let params = {};
              params['page_num'] = this.page;
              params['page_size'] = this.pageSize;
              
              params['recommend_id'] = this.ids;
            //   params['type'] = 1;
              
              
              this.$http.get(SHOP_LIST, {
                  params
              })
              .then(res => {
                  const {
                  list
                  } = res.data;
              
                  if(list && list.length) {
                      this.page++;
                      this.list = this.list.concat(list);
                      // 加载状态结束
                      this.loadingPage = false;
                      if(list.length < this.pageSize) {
                      this.finished = true;
                      }
                  }else {
                  this.finished = true;
                  }
              })
          }
      }
  
  }
  
  </script>
  <style lang="scss" >
  .gold-shop-wrap{
      min-height: 100vh;
      padding-top: 46px;
      background-color: #fff;
      box-sizing: border-box;
      .van-nav-bar .van-icon{
          color: #333333;
      }
      .van-nav-bar__arrow{
          font-size: 20px;
      }
      .my-swipe{
          width: 7.02rem;
          margin: auto;
          .banner-li{
              display: block;
              width: 7.02rem;
              height: 2.8rem;
          }
      }
      .shop-box{
          padding: 0 0.24rem;
      }
      .shop-title{
          position: relative;
          height: 0.44rem;
          line-height: 0.44rem;
          margin-top: 0.32rem;
          margin-bottom: 0.32rem;
          font-weight: 500;
          font-size: 0.32rem;
          color: #333333;
          .shop-title-tag{
              position: absolute;
              left: 0;
              bottom: 0;
              width: 1.28rem;
              height: 0.14rem;
              background: linear-gradient( 90deg, #FD1A1A 0%, rgba(231,1,1,0) 100%);
          }
      }
      .shop-li{
          width: 7.02rem;
          height: 3.24rem;
          margin-bottom: 0.2rem;
          padding: 0.24rem 0 0.16rem 0.24rem;
          border-radius: 0.12rem;
          box-sizing: border-box;
          background-color: #F2F4F5;
          .shop-top{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .shop-info{
                  display: flex;
                  .shop-info-log{
                      width: 0.8rem;
                      height: 0.8rem;
                      margin-right: 0.16rem;
                  }
                  .shop-info-name{
                      height: 0.44rem;
                      line-height: 0.44rem;
                      font-weight: 500;
                      font-size: 0.32rem;
                      font-weight: 500;
                      color: #333333;
                  }
                  .shop-name{
                      max-width: 4rem;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      word-break: break-all;
                      margin-top: .15rem;
                  }
                  .shop-good-sale{
                      line-height: 0.28rem;
                      font-weight: 400;
                      font-size: 0.2rem;
                      color: #FE7900;
                  }
              }
          }
          .shop-btn{
              display: flex;
              align-items: center;
              justify-content: center;
              width: 1.12rem;
              height: 0.48rem;
              margin-right: 0.32rem;
              font-size: 0.24rem;
              color: #F32A23;
              border-radius: 0.24rem;
              background: rgba(243,42,35,0.1);
              border: 0.02rem solid #F32A23;
          }
      }
  
      .good-scroll{
          display: flex;
          flex-wrap: nowrap;
          margin-top: 0.16rem;
          overflow-y: auto;
          &::-webkit-scrollbar{
              display: none;
          }
          &::-webkit-scrollbar-track{
              display: none;
          }
          &::-webkit-slider-thumb{
              display: none;
          }
          .good-li{
              position: relative;
              flex-shrink: 0;
              width: 1.88rem;
              height: 1.88rem;
              margin-right: 0.08rem;
              background: #fff;
              border-radius: 0.12rem;
              background-size: cover!important; 
              &:last-child{
                  margin-right: 0.24rem;
              }
              .good-li-price{
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  height: 0.36rem;
                  width: 100%;
                  padding-right: 0.12rem;
                  font-weight: 500;
                  font-size: 0.24rem;
                  color: #fff;
                  background-color: rgba(0,0,0,0.4);
                  border-radius: 0 0 0.12rem 0.12rem;
                  box-sizing: border-box;
              }
          }
      }
  
      .empty-good{
          padding-top: 1rem;
      }
  }
  </style>